<script setup lang="ts">
// 局部注册 在script中导入之后即可在template中使用 <DataPage />
import DataPage from "./DataPage.vue";
import EmitDataPage from "./EmitDataPage.vue";
import V_ModelPage from "./V_ModelPage.vue"
import MuiltiVModel from "./MuiltiVModel.vue";
import MyProvider from "./Layer2Components/Provide_Inject.vue";
import MyCompute from "./ComputeAttribute.vue"
import { ref, provide, readonly, inject } from 'vue';
const goushi = ref('goushi');
const passwdParent = ref('');
const stringParent = ref('');
const MuiltiValueParent = ref({
  address1: '',
  address2: '',
  id: 0
});

// 通过 provide-inject 传递ref给子组件; 注意第二个参数可以是任意类型值
/*
  当提供注入响应式的数据时，
  建议尽可能将任何对响应式状态的变更都保持在供给方组件中
  这样可以确保所提供状态的声明和变更操作都[内聚]在同一个组件内，使其更容易维护。
*/
/*
  如果你想让子组件影响父组件的数据，可以：
  通过 props + emit：子组件通过 $emit 事件通知父组件，父组件响应事件并修改数据。
  注入响应式对象：如果父组件 provide 了一个 ref/reactive 对象，
    子组件 inject 后可以直接修改它，父组件也能感知到变化（但这样会让数据流变得不清晰，不推荐频繁使用）。
*/
const provider_parent = ref("string from parent");
// 使用readonly防止子组件修改父组件的状态 防止数据流混乱和数据相互污染
provide( "MainPage_Provide1", readonly(provider_parent) );

// 限制类型 参考:https://segmentfault.com/a/1190000046558262
interface ParentObjectProvider {
  id?: number;
  address1?: string;
}
const user = inject<ParentObjectProvider>('MainPage_Provide1', { id: 0, address1: '' });

function goushiButtonClick():void {
  goushi.value += "!";
}

// emit 父组件接收回调
function handleAddOne(value: number) {
  alert('addOne' + value);
}
function handleAddTen(value: number) {
  alert('addTen' + value);
}


</script>

<template>
  <h1 class="text-sky-400 text-2xl">Tailwind CSS</h1>
  <div class="bg-red-900 text-center border-2">testtesttest</div>
  <div class="container">
    <div class="mainPage">
      <h1>Welcome to the Main Page</h1>
      <p>This is the main content of the page.</p>
    </div>
    <div>
      <!-- <button @click="goushiButtonClick">click me bitch</button> -->
      <button v-on:click="goushiButtonClick">click me bitch</button>
      <DataPage :name="goushi" />
    </div>
    <br>
    <div>
      <EmitDataPage @addOne="handleAddOne" @addTen="handleAddTen"/>
    </div>
    <V_ModelPage v-model="passwdParent"/>
    <h2>Parent Output:::::::>{{ passwdParent }}</h2>

    <MuiltiVModel v-model:modelValue="MuiltiValueParent"/>
    <h2> Parent Multi Value:::::> {{ MuiltiValueParent }} </h2>
    <br>
    <MyProvider>
      <p> 什么东西? </p>
      <template #part1>
        <div class="child_part1">
          <p>part1 什么什么东西?</p>
        </div>
      </template>
      <template #part2>
        <input/>
      </template>
    </MyProvider>
    <MyCompute/>
  </div>
</template>

<style scoped>

.child_part1 {
  background-color: #365084;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.mainPage {
  border-radius: 5px;
  border-color: white;
  border-width: 10px;
  /* border: solid; */
  border: dashed;

  padding: 5%;
}
</style>
